<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form-model
        ref="formModel"
        :model="form"
        layout="inline"
        :rules="{
          name: [
            {
              validator: validators.noWhitespace(),
              trigger: 'change',
            },
            {
              validator: validators.noIllegalString(),
              trigger: 'change',
            },
            {
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'change',
            },
          ],
        }"
      >
        <a-row :gutter="[16, 16]" type="flex" justify="end">
          <a-col :md="6" :sm="8">
            <a-form-model-item prop="name" label="设备名称">
              <a-input autocomplete="off" v-model="form.name" />
            </a-form-model-item>
          </a-col>
          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col :md="12" :sm="24">
              <a-button
                type="primary"
                @click="loadData(true)"
                icon="search"
                style="margin-left: 21px"
              >
                查询
              </a-button>
              <a-button
                icon="reload"
                style="margin-left: 8px"
                @click="resetSearchForm"
              >
                重置
              </a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span slot="sortCol" slot-scope="text, record, index">
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
    </a-table>
  </div>
</template>

<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";

export default {
  name: "Air",
  mixins: [GwListMixin],
  props: {
    modelType: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "设备名称",
          width: 150,
          dataIndex: "name",
        },
        {
          title: "设备类型",
          width: 150,
          dataIndex: "typeCnName",
        },
        {
          title: "设备型号",
          width: 150,
          dataIndex: "deviceModel",
        },
        {
          title: "数据中心",
          width: 150,
          dataIndex: "datacenterName",
        },
      ],
      columns010302: [
        {
          title: "送风量",
          width: 150,
          dataIndex: "airOutTemperature",
          customRender: function (t, r, index) {
            return t ? t : "加载中...";
          },
        },
        {
          title: "回风量",
          width: 150,
          dataIndex: "airInTemperature",
          customRender: function (t, r, index) {
            return t ? t : "加载中...";
          },
        },
      ],
      columns010303: [
        {
          title: "当前温度",
          width: 150,
          dataIndex: "airCurrentTemperature",
          customRender: function (t, r, index) {
            return t ? t : "加载中...";
          },
        },
        {
          title: "设定温度",
          width: 150,
          dataIndex: "airSettingTemperature",
          customRender: function (t, r, index) {
            return t ? t : "加载中...";
          },
        },
      ],
      url: {
        list: "/asset/pageDevice",
      },
      form: {
        name: "",
      },
      elementList: [],
      elementMap: {},
    };
  },
  mounted() {
    if (this.modelType === 'f010302') {
      this.columns = this.columns.concat(this.columns010302);
      this.gQueryParam.title = "精确管控与供电制冷联动-供电制冷最优模型-供电制冷设备流量监管-制冷设备";
      this.gQueryParam.content = "查询制冷设备列表";
    } else if (this.modelType === 'f010303') {
      this.columns = this.columns.concat(this.columns010303);
      this.gQueryParam.title = "精确管控与供电制冷联动-供电制冷最优模型-供电制冷设备资源监控-制冷设备";
      this.gQueryParam.content = "查询制冷设备列表";
    }
    this.loadData(true);
  },
  watch: {
    elementList(val) {
      if (val && val.length === this.gDataSource.length) {
        let list = [];
        this.gDataSource.forEach((item) => {
          list.push(this.elementMap[item.id]);
        })
        this.gDataSource = list;
      }
    },
  },
  methods: {
    loadData(isDoSearch) {
      this.$refs.formModel.validate((error) => {
        if (!error) {
          return;
        }
        this.elementList = [];
        if (isDoSearch) {
          this.gQueryParam.pageNo = 1;
          this.gPagination.current = 1;
        }
        this.gQueryParam.name = this.form.name;
        this.gQueryParam.type = 1;
        this.gDataSource = [];

        gPostAction(this.url.list, this.gQueryParam).then((res) => {
          const data = res.data;
          this.gDataSource = data.list;
          if (data && data.list) {
            this.gPagination.total = data.totalCount;
            data.list.forEach((element) => {
              gPostAction(
                "/statistics/latestSamples",
                { meter: "environment.air", resourceId: element.datacenterId },
                this.gBaseUrl
              ).then((res) => {
                if (res.success && res.data && res.data.length) {
                  res.data.forEach((item) => {
                    let meter = item.meter;
                    let volume = item.volume;
                    let unit = item.unit;
                    let valText = '';
                    if (volume) {
                      valText = parseFloat(volume).toFixed(2) + unit;
                    }
                    if (meter === "environment.air_in_wind") {
                      element.airInTemperature = valText;
                    } else if (meter === "environment.air_out_wind") {
                      element.airOutTemperature = valText;
                    } else if (
                      meter === "environment.air_setting_temperature"
                    ) {
                      element.airSettingTemperature = valText;
                    } else if (
                      meter === "environment.air_out_temperature"
                    ) {
                      element.airCurrentTemperature = valText;
                    }
                  });
                }
                this.elementList.push(element);
                this.elementMap[element.id] = element;
                // this.gDataSource.push(element);
              });
            });
          }
        });
      });
    },
    resetSearchForm() {
      this.form.name = "";
      this.$refs.formModel.resetFields();
    },
  },
};
</script>
